<template>
	<view class="kuang">
		<image class="bj" src="/static/图层 1@3x.png" mode=""></image>
		<text class="title">商户资料</text>
	</view>
	<view class="jiantou" @click="goBack"></view>

	<view class="quyi">
		<scroll-view class="content-scroll" scroll-y>
			<!-- 个人信息部分 -->
			<view class="info-section">
				<view class="info-item">
					<text class="info-label">负责人:</text>
					<text class="info-value">{{ merchantInfo.responsiblePerson }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">身份证号码:</text>
					<text class="info-value">{{ merchantInfo.idNumber }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">手机号:</text>
					<text class="info-value">{{ merchantInfo.phoneNumber }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">店名:</text>
					<text class="info-value">{{ merchantInfo.storeName }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">营业执照号码:</text>
					<text class="info-value">{{ merchantInfo.businessLicenseNumber }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">经营区域:</text>
					<text class="info-value">{{ merchantInfo.businessArea }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">地址:</text>
					<text class="info-value">{{ merchantInfo.address }}</text>
				</view>
			</view>

			<!-- 商家简介部分 -->
			<view class="info-section">
				<view class="info-item intro-item">
					<text class="info-label">商家简介</text>
					<text class="intro-text">{{ merchantInfo.introduction }}</text>
				</view>
			</view>

			<!-- 身份证正反面照片 -->
			<view class="info-section">
				<view class="info-item">
					<text class="info-label">身份证正反面照片</text>
				</view>
				<view class="image-display-group">
					<view class="image-wrapper" v-if="merchantInfo.idCardFront">
						<image 
							:src="merchantInfo.idCardFront" 
							mode="aspectFit" 
							class="display-image"
						></image>
					</view>
					<view class="image-wrapper" v-if="merchantInfo.idCardBack">
						<image 
							:src="merchantInfo.idCardBack" 
							mode="aspectFit" 
							class="display-image"
						></image>
					</view>
				</view>
			</view>

			<!-- 营业执照 -->
			<view class="info-section">
				<view class="info-item">
					<text class="info-label">营业执照</text>
				</view>
				<view class="image-display-group">
					<view class="image-wrapper" v-if="merchantInfo.businessLicense">
						<image 
							:src="merchantInfo.businessLicense" 
							mode="aspectFit" 
							class="display-image"
						></image>
					</view>
				</view>
			</view>

			<!-- 门店照片 -->
			<view class="info-section">
				<view class="info-item">
					<text class="info-label">门店照片</text>
				</view>
				<view class="image-display-group">
					<view class="image-wrapper" v-if="merchantInfo.storePhoto">
						<image 
							:src="merchantInfo.storePhoto" 
							mode="aspectFit" 
							class="display-image"
						></image>
					</view>
				</view>
			</view>

			<!-- 底部间距，确保内容不被按钮遮挡 -->
			<view class="bottom-spacing"></view>
		</scroll-view>
	</view>

	<!-- 修改按钮 -->
	<view class="footer-btn-container">
		<button class="modify-btn" @click="modifyMerchantInfo">修改</button>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'

// 商户资料数据
const merchantInfo = ref({
	responsiblePerson: '张大美',
	idNumber: '40365236541232563',
	phoneNumber: '18893039203',
	storeName: '大美汽修店',
	businessLicenseNumber: '4252336467474764646',
	businessArea: '焦作市山阳区',
	address: '山阳区迎宾路32号',
	introduction: '这里是简单的商家介绍这里是简单的商家介绍这里是简单的商家介绍这里是简单的商家介绍这里是简单的商家介绍这里是简单的商家介绍商家介绍。',
	idCardFront: '/static/article01.jpg', // 身份证正面
	idCardBack: '/static/article01.png', // 身份证反面
	businessLicense: '/static/article03.jpg', // 营业执照
	storePhoto: '/static/article11.jpg' // 门店照片
})

// 从本地存储读取数据的函数
const loadMerchantInfo = () => {
	try {
		// 强制从本地存储读取，覆盖默认值
		console.log('开始读取本地存储数据')
		// 先检查本地存储是否存在
		const hasStorage = uni.getStorageInfoSync().keys.includes('merchantInfo')
		console.log('本地存储中是否存在merchantInfo:', hasStorage)
		
		let storedInfo = null
		if (hasStorage) {
			storedInfo = uni.getStorageSync('merchantInfo')
		}
		
		console.log('merchantInfo页面读取到的本地存储数据:', storedInfo)
		
		if (storedInfo && typeof storedInfo === 'object') {
			try {
				// 确保是对象格式并深拷贝
				const parsedInfo = typeof storedInfo === 'string' ? JSON.parse(storedInfo) : storedInfo
				// 验证数据完整性
				if (parsedInfo && typeof parsedInfo === 'object' && Object.keys(parsedInfo).length > 0) {
					// 深拷贝确保响应式正确更新
					merchantInfo.value = JSON.parse(JSON.stringify(parsedInfo))
					console.log('merchantInfo页面更新后的数据:', merchantInfo.value)
				} else {
					throw new Error('数据格式无效')
				}
			} catch (parseError) {
				console.error('解析数据失败:', parseError)
				// 数据解析失败，使用默认数据并保存
				console.log('数据解析失败，使用默认数据')
				merchantInfo.value = JSON.parse(JSON.stringify({
					responsiblePerson: '张大美',
					idNumber: '40365236541232563',
					phoneNumber: '18893039203',
					storeName: '大美汽修店',
					businessLicenseNumber: '4252336467474764646',
					businessArea: '焦作市山阳区',
					address: '山阳区迎宾路32号',
					introduction: '这里是简单的商家介绍',
					idCardFront: '/static/article01.jpg',
					idCardBack: '/static/article01.png',
					businessLicense: '/static/article03.jpg',
					storePhoto: '/static/article11.jpg'
				}))
				// 清除损坏的数据
				uni.removeStorageSync('merchantInfo')
				// 保存默认数据
				uni.setStorageSync('merchantInfo', merchantInfo.value)
			}
		} else {
			// 如果没有本地存储数据或数据为空，将默认数据保存到本地存储
			console.log('没有找到本地存储数据或数据为空，使用默认值并保存')
			// 重置为默认数据
			merchantInfo.value = JSON.parse(JSON.stringify({
				responsiblePerson: '张大美',
				idNumber: '40365236541232563',
				phoneNumber: '18893039203',
				storeName: '大美汽修店',
				businessLicenseNumber: '4252336467474764646',
				businessArea: '焦作市山阳区',
				address: '山阳区迎宾路32号',
				introduction: '这里是简单的商家介绍',
				idCardFront: '/static/article01.jpg',
				idCardBack: '/static/article01.png',
				businessLicense: '/static/article03.jpg',
				storePhoto: '/static/article11.jpg'
			}))
			// 清除可能存在的无效数据
			try {
				uni.removeStorageSync('merchantInfo')
			} catch (e) {
				console.log('尝试清除无效数据失败:', e)
			}
			// 保存默认数据
			uni.setStorageSync('merchantInfo', merchantInfo.value)
		}
	} catch (e) {
		console.error('读取商户数据失败', e)
		uni.showToast({
			title: '读取数据失败',
			icon: 'none'
		})
		// 出错时尝试清除可能损坏的本地存储
		try {
			uni.removeStorageSync('merchantInfo')
			console.log('已清除可能损坏的本地存储数据')
			// 重置为默认数据
			merchantInfo.value = JSON.parse(JSON.stringify({
				responsiblePerson: '张大美',
				idNumber: '40365236541232563',
				phoneNumber: '18893039203',
				storeName: '大美汽修店',
				businessLicenseNumber: '4252336467474764646',
				businessArea: '焦作市山阳区',
				address: '山阳区迎宾路32号',
				introduction: '这里是简单的商家介绍',
				idCardFront: '/static/article01.jpg',
				idCardBack: '/static/article01.png',
				businessLicense: '/static/article03.jpg',
				storePhoto: '/static/article11.jpg'
			}))
		} catch (removeError) {
			console.error('清除本地存储失败', removeError)
		}
	}
}

// 页面加载时获取商户数据
onMounted(() => {
	loadMerchantInfo()
})

// 页面显示时重新获取数据（当从修改页面返回时会触发）
onShow(() => {
	loadMerchantInfo()
})

// 返回上一页
const goBack = () => {
	uni.navigateBack({ delta: 1 })
}

// 修改商户资料
const modifyMerchantInfo = () => {
	// 跳转到修改页面
	uni.navigateTo({
		url: '/pages/merchantEdit/merchantEdit'
	})
}
</script>

<style scoped>
	.bj {
		position: absolute;
		z-index: 1;
		width: 750rpx;
		height: 430rpx;
	}

	.kuang {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 35rpx;
		position: absolute;
		z-index: 2;
		color: white;
		margin-top: 60rpx;
	}

	.jiantou {
		position: absolute;
		z-index: 2;
		width: 30rpx;
		height: 30rpx;
		border: 5rpx solid white;
		border-top: none;
		border-left: none;
		transform: rotate(135deg);
		margin-top: 60rpx;
		margin-left: 30rpx;
	}

	.jiantou:active {
		opacity: 0.7;
	}

	.quyi {
		position: absolute;
		z-index: 2;
		background-color: white;
		width: 710rpx;
		min-height: 1000rpx;
		margin-top: 140rpx;
		margin-left: 20rpx;
		border-radius: 30rpx;
		border-bottom: 2rpx solid #f8f8f8;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.content-scroll {
		padding: 32rpx;
		box-sizing: border-box;
	}

	.info-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.info-item {
		padding: 24rpx 0;
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		align-items: center;
	}
	
	.info-label {
		flex-shrink: 0;
	}
	
	.info-value {
		flex: 1;
		text-align: right;
		padding-left: 20rpx;
		word-break: break-all;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.info-label {
		width: 180rpx;
		font-size: 30rpx;
		color: #666;
		flex-shrink: 0;
	}

	.info-value {
		flex: 1;
		font-size: 30rpx;
		color: #333;
		line-height: 1.5;
	}

	.intro-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.intro-text {
		margin-top: 16rpx;
		width: 100%;
		font-size: 28rpx;
		color: #333;
		line-height: 1.8;
		word-break: break-word;
	}

	.image-display-group {
		margin-top: 16rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.image-wrapper {
		position: relative;
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
		overflow: hidden;
		border: 1rpx solid #e0e0e0;
	}

	.display-image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	.bottom-spacing {
		height: 140rpx;
	}

	.footer-btn-container {
		position: fixed;
		bottom: 48rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		width: 710rpx;
	}

	.modify-btn {
		width: 100%;
		height: 96rpx;
		background: linear-gradient(135deg, #2b77ff 0%, #0556db 100%);
		color: white;
		border-radius: 48rpx;
		font-size: 34rpx;
		font-weight: 500;
		border: none;
		box-shadow: 0 8rpx 24rpx rgba(43, 119, 255, 0.35);
		letter-spacing: 1rpx;
	}

	.modify-btn:active {
		opacity: 0.8;
	}
</style>